﻿/*!
 * 样式名称：Hui.css
 * 样式作者：新生帝
 * 编写日期：2016年03月13日
 * 版权所有：中山赢友网络科技有限公司
 * 企业官网：http://www.winu.net
 * 开源协议：GPL v2 License
 * 样式描述：一切从简，只为了更懒！
 */

/* HTML5 重置样式 */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; }
article, aside, figure, footer, header, nav, section, details, summary { display: block; }
html { box-sizing: border-box; }
*,
*:before,
*:after { box-sizing: inherit; }
img,
object,
embed { max-width: 100%; }
html { overflow-y: scroll; }
ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 0.1rem dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: bold; vertical-align: bottom; }
td { font-weight: normal; vertical-align: top; }
hr { display: block; height: 0.1rem; border: 0; border-top: 0.1rem solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
select, input, textarea { font: 99% sans-serif; }
table { font-size: inherit; font: 100%; }
small { font-size: 85%; }
strong { font-weight: bold; }
td, td img { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
button,
input[type=button] { width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
.clearfix:after { content: " "; display: block; clear: both; }

/* 清除移动浏览器默认样式 */
html, body { -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* 设置默认字体单位为rem，14px=1.4rem */
html { font-size: 62.5%; height: 100%; }
body { font-size: 1.6rem; background: #f4f5f9; width: 100%; height: 100%; }

/* 常用样式 */
.H-width100-percent { width: 100%; }
.H-height100-percent { height: 100%; }
.H-auto-height { min-height: 0; height: auto; }
.H-vertical-padding10 { padding: 1rem 0; }
.H-horizontal-padding10 { padding: 0 1rem; }
.H-vertical-margin10 { margin: 1rem 0; }
.H-horizontal-margin10 { margin: 0 1rem; }
.H-vertical-padding0 { padding-top: 0; padding-bottom: 0; }
.H-horizontal-padding0 { padding-left: 0; padding-right: 0; }
.H-vertical-margin0 { margin-top: 0; margin-bottom: 0; }
.H-horizontal-margin0 { margin-left: 0; margin-right: 0; }
.H-padding10 { padding: 1rem; }
.H-margin10 { margin: 1rem; }
.H-padding-top10 { padding-top: 1rem; }
.H-margin-top10 { margin-top: 1rem; }
.H-margin-top5 { margin-top: 0.5rem; }
.H-padding-left10 { padding-left: 1rem; }
.H-margin-left10 { margin-left: 1rem; }
.H-padding-right10 { padding-right: 1rem; }
.H-margin-right10 { margin-right: 1rem; }
.H-padding-bottom10 { padding-bottom: 1rem; }
.H-margin-bottom10 { margin-bottom: 1rem; }
.H-padding-top0 { padding-top: 0; }
.H-margin-top0 { margin-top: 0; }
.H-padding-left0 { padding-left: 0; }
.H-margin-left0 { margin-left: 0; }
.H-padding-right0 { padding-right: 0; }
.H-margin-right0 { margin-right: 0; }
.H-padding-bottom0 { padding-bottom: 0; }
.H-margin-bottom0 { margin-bottom: 0; }
.H-overflow-hidden { overflow: hidden; }
.H-overflow-auto { overflow: auto; }
.H-overflow-scroll { overflow: scroll; }
.H-overflow-x-hidden { overflow-x: hidden; }
.H-overflow-x-auto { overflow-x: auto; }
.H-overflow-x-scroll { overflow-x: scroll; }
.H-overflow-y-hidden { overflow-y: hidden; }
.H-overflow-y-auto { overflow-y: auto; }
.H-overflow-y-scroll { overflow-y: scroll; }
.H-background-white { background: #fff; }
.H-background-black { background: #000; }
.H-background-red { background: #f00; }
.H-background-green { background: green; }
.H-background-blue { background: #00f; }
.H-background-transparent { background: rgba(0,0,0,0); }
.H-background-transparent50-percent { background: rgba(0,0,0,0.5); }
.H-background-transparent20-percent { background: rgba(0,0,0,0.2); }
.H-background-transparent80-percent { background: rgba(0,0,0,0.8); }
.H-color-white { color: #fff; }
.H-color-black { color: #000; }
.H-block-margin-auto { margin: 0 auto; }
.H-text-horizontal-center { text-align: center; }
.H-text-horizontal-left { text-align: left; }
.H-text-horizontal-right { text-align: right; }
.H-block-horizontal-center { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; display: box; box-orient: horizontal; box-pack: center; }
.H-block-horizontal-left { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: start; display: box; box-orient: horizontal; box-pack: start; }
.H-block-horizontal-right { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: end; display: box; box-orient: horizontal; box-pack: end; }
.H-text-vertical-middle, .H-block-vertical-middle { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; }
.H-text-vertical-top, .H-block-vertical-top { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: start; display: box; box-orient: horizontal; box-align: start; }
.H-text-vertical-bottom, .H-block-vertical-bottom { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: end; display: box; box-orient: horizontal; box-align: end; }
.H-center-all { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
.H-border-radius-circle { border-radius: 50%; -webkit-border-radius: 50%; }
.H-border-radius3-rem { border-radius: 0.3rem; -webkit-border-radius: 0.3rem; }
.H-transition-all { transition: All 0.5s ease-in; -webkit-transition: All 0.5s ease-in; }
.H-flexbox-vertical { display: box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-flow: column; flex-flow: column; height: 100%; -webkit-flex-direction: column; flex-direction: column; }
.H-flexbox-horizontal { display: box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-flex-flow: row; flex-flow: row; width: 100%; -webkit-flex-direction: row; flex-direction: row; }
.H-flex-item { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.H-vertical-align-middle { vertical-align: middle; }
.H-position-absolute { position: absolute; }
.H-position-relative { position: relative; }
.H-position-fixed { position: fixed; }
.H-position-static { position: static; }
.H-display-none { display: none; }
.H-display-block { display: block; }
.H-display-inline { display: inline; }
.H-display-inline-block { display: inline-block; }
.H-display-table { display: table; }
.H-display-table-cell { display: table-cell; }
.H-box-sizing-border-box { box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-box-sizing-content-box { box-sizing: content-box; -webkit-box-sizing: content-box; }
.H-float-left { float: left; }
.H-float-right { float: right; }
.H-float-none { float: none; }
.H-horizontal-line { position: relative; height: 0.1rem; width: 100%; }
.H-horizontal-line:after { border-bottom: 0.1rem solid #d7d7d7; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer-events: none; }
.H-text-show-row-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.H-text-show-row-2 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.H-text-show-row-3 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.H-text-show-row-4 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.H-text-show-row-5 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.H-flexbox { display: -webkit-flex; display: flex; }
.H-flexbox-inline { display: -webkit-inline-flex; display: inline-flex; }
.H-flexbox-horizontal-direction-ltr { -webkit-flex-direction: row; flex-direction: row; }
.H-flexbox-horizontal-direction-rtl { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
.H-flexbox-vertical-direction-ttb { -webkit-flex-direction: column; flex-direction: column; }
.H-flexbox-vertical-direction-btt { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
.H-flexbox-horizontal-nowrap { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.H-flexbox-horizontal-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.H-flexbox-horizontal-nowrap-reverse { -webkit-flex-wrap: nowrap-reverse; flex-wrap: nowrap-reverse; }
.H-flexbox-horizontal-wrap-reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
.H-block-row-parent { display: box; display: -webkit-box; -webkit-box-orient: horizontal; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; }
.H-block-row-item { -webkit-box-align: center; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-color-ccc { color: #ccc; }

/*顶部导航栏*/
.H-header { min-height: 4.4rem; position: relative; height: auto; box-sizing: initial; -webkit-box-sizing: initial; }
.H-header.fixStatuBar { padding-top: 25px; }
.H-header-title { position: absolute; height: 4.4rem; left: 0; z-index: 10; width: 100%; padding: 0 4.4rem; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 2rem; color: #fff; line-height: 0; font-weight: 500; box-sizing: border-box; -webkit-box-sizing: border-box; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
.background-34495e { background: #34495e; }
.H-header .H-icon { height: 4.4rem; position: relative; z-index: 30; display: inline-block; line-height: 4.4rem; color: #f5f5f5; padding: 0 0.8rem; }
.H-header .H-icon i { font-size: 1.8rem; color: #f5f5f5; vertical-align: middle; }

/*选项卡标题*/
.H-header-tab { display: inline-block; border: 1px solid #fff; overflow: hidden; border-radius: 0.4em; -webkit-border-radius: 0.4rem; line-height: normal; }
.H-header-tab span { display: inline-block; font-size: 1.3rem; border: 1px solid #fff; float: left; border-width: 0 1px 0 0; padding: 0.3rem 1rem; vertical-align: middle; text-align: center; }
.H-header-tab span:last-child { border-width: 0; }
.H-header-tab span.active, .H-header-tab span:active { background: #fff; color: #394a5d; }

/*底部导航*/
.H-footer, .H-footer ul { height: 5.5rem; width: 100%; }
.H-footer ul li { padding: 0.6rem 0; color: #7f7f7f; text-align: center; }
.H-footer ul li.active, .H-footer ul li:active { color: #34495e; background: #e9e9e9; }
.H-footer ul li .H-icon { margin-bottom: 0.2rem; display: block; }
.H-footer ul li .H-icon i { font-size: 2.6rem; }
.H-footer .H-icon-circle { display: inline-block; height: 4.2rem; width: 4.2rem; border-radius: 50%; -webkit-border-radius: 50%; background: #34495e; line-height: 4.2rem; }
.H-footer .H-icon-circle .H-icon i { color: #fff; }
.background-eeeeee { background: #eeeeee; }
.H-footer ul p { font-size: 1.1rem; }

/*列表*/
.H-list { position: relative; }
.H-list-item { padding: 1.4rem 0.8rem; position: relative; background: #fff; }
.H-list-item:active { background: #f4f4f4; }
.H-list-item .H-text { color: #767677; font-size: 1.6rem; padding: 0 0.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.H-list-item .H-icon { line-height: 0; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; margin: 0 0.2rem 0 0; vertical-align: middle; }
.H-list-item .H-icon i { font-size: 1.8rem; color: #666; vertical-align: middle; }
.H-list-item .H-icon.H-arrow { margin: 0; }
.H-list-item .H-icon.H-arrow i { color: #ccc; font-size: 1.4rem; }
.H-list-item .H-icon.block { width: 1.6em; height: 1.6em; background: #2ecc71; line-height: 0; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; border-radius: 0.3rem; -webkit-border-radius: 0.3rem; vertical-align: top; }
.H-list-item .H-icon.block i { font-size: 1.3rem; line-height: 0; color: #fff; }

.H-list-item:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
/*列表主题一*/
.H-list.H-list-theme1 .H-list-item:after { left: 1.2rem; }
.H-list.H-list-theme1 .H-list-item:last-child:after { left: 0; }
.H-list.H-list-theme1 .H-list-item:first-child:before { content: ""; position: absolute; left: 0; margin-left: 0; top: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
/*列表主题二*/
.H-list.H-list-theme2 { overflow: hidden; }
.H-list.H-list-theme2:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #d7d7d7; border-radius: 0.6rem; -webkit-border-radius: 0.6rem; overflow: hidden; overflow: hidden; }
.H-list.H-list-theme2 .H-list-item:last-child:after { border-top: 0; }

/*分类标题*/
.H-title-channel { font-size: 1.8rem; color: #394a5d; padding: 1rem; position: relative; margin-bottom: 0.5em; clear: both; background: #fff; }
.H-title-channel:after { content: ""; position: absolute; left: 0.5em; margin-left: 0; bottom: 0; right: 0.5em; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-bold-line { display: inline-block; margin-right: 1rem; height: 1em; width: 3px; background: #34495e; vertical-align: middle; line-height: 0; }
.H-label-text { display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }



/*角标*/
.H-badge { line-height: 0; }
.H-badge label { display: inline-block; height: 1.7rem; line-height: 1.9rem; padding: 0 0.5rem; font-size: 1.2rem; color: #fff; background-color: #2ecc71; vertical-align: middle; border-radius: 10rem; -webkit-border-radius: 10rem; -webkit-transform: translateY(0.5); transform: translateY(0.5); margin-top: 0.4rem; }

/*表单元素-切换框*/
.H-form-switch { cursor: pointer; background: #ffffff; box-shadow: #dfdfdf 0 0 0 0 inset; -webkit-box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 1.3rem; -webkit-border-radius: 1.3rem; background-clip: content-box; display: inline-block; -webkit-appearance: none; user-select: none; outline: none; transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; -webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; width: 4.6rem; height: 2.6rem; position: relative; border: 0.1rem solid #dddddd; }
.H-form-switch:before { position: absolute; top: 0; left: 0; border-radius: 1.3rem; -webkit-border-radius: 1.3rem; background: #fff; box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.4); content: ''; transition: left 0.2s; -webkit-transition: left 0.2s; width: 2.4rem; height: 2.4rem; }
.H-form-switch:checked { border-color: #1abc9c; box-shadow: #1abc9c 0 0 0 0.1rem inset; background: #1abc9c; transition: border ease 0.2s, box-shadow ease 0.2s, background ease 0.6s; }
.H-form-switch:checked:before { left: 2rem; transition: left 0.2s; -webkit-transition: left 0.2s; }
/*表单元素-复选框*/
.H-form-checkbox-radio { -webkit-appearance: none; appearance: none; width: 2.4rem; height: 2.4rem; -webkit-transition: all 0.15s ease-out 0; transition: all 0.15s ease-out 0; background: #fff; border: none; color: #fff; cursor: pointer; display: inline-block; outline: none; vertical-align: middle; border: 1px solid #d7d7d7; border-radius: 0.6rem; -webkit-border-radius: 0.6rem; }
.H-form-checkbox-radio:hover { background: #9faab7; }
.H-form-checkbox-radio:checked { background: #40e0d0; transition: box-shadow ease 0.2s, background ease 0.6s; border: 1px solid #40e0d0; }
.H-form-checkbox-radio:checked::before { width: 2.4rem; height: 2.4rem; position: absolute; content: '\2713'; display: inline-block; font-size: 1.8rem; text-align: center; line-height: 2.4rem; }
.H-form-checkbox-radio:checked::after { }
/*表单元素-单选框*/
.H-form-checkbox-radio[type=radio] { border-radius: 50%; -webkit-border-radius: 50%; width: 2.6rem; height: 2.6rem; vertical-align: middle; }
.H-form-checkbox-radio[type=radio]::after { border-radius: 50%; -webkit-border-radius: 50%; }
.H-form-checkbox-radio[type=radio]:checked::before { width: 2.6rem; height: 2.6rem; line-height: 2.6rem; }
/*表单元素-文本框*/
.H-form-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-flex-flow: row; flex-flow: row; width: 100%; padding: 1rem; position: relative; background: #fff; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; clear: both; }
.H-form-row:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-form-text label { vertical-align: middle; color: #444; }
.H-form-text { user-select: none; padding: 0.5rem; font-size: 1.6rem; color: #666; vertical-align: middle; display: flex; display: -webkit-box; display: -webkit-flex; border: 0; outline: 0; height: 32px; background: #fff; line-height: 32px; }

/*表单元素-滑块*/
input[type=range] { -webkit-appearance: none; width: 100%; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 0.4rem; cursor: pointer; background: #d7d7d7; }
input[type=range]::-webkit-slider-thumb { border: 1px solid #d7d7d7; height: 2.2rem; width: 2.2rem; border-radius: 50%; -webkit-border-radius: 50%; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -1rem; }
input[type=range]:focus::-webkit-slider-runnable-track { background: #d7d7d7; }
textarea { min-height: 12rem; overflow-y: scroll; line-height: 22px !important; }
/* 文本框默认提示样式 */
::-webkit-input-placeholder { position: relative; }

/*卡片模式*/
.H-border-card { position: relative; margin: 0.8rem; background: #fff; }
.H-border-card:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #d7d7d7; border-radius: 0.6rem; -webkit-border-radius: 0.6rem; overflow: hidden; overflow: hidden; }

/*加载图片动画*/
.H-loading-fixed { position: fixed; top: 0; background: #fff; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: 199204; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
.H-loading-fixed img { width: 200px; }

/*点击按钮*/
.H-button { border: 1px solid #34495e; display: inline-block; color: #34495e; text-align: center; border-radius: 0.3rem; -webkit-border-radius: 0.3rem; -webkit-appearance: none; appearance: none; background: none; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; padding: 0.5rem 1.2rem; user-select: none; touch-action: manipulation; -webkit-user-select: none; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; font-size: 1.4rem; }
.H-button:active { color: #ffffff; background-color: #34495e; }
.H-button.big { padding: 1rem 1.2rem; }
.H-button.color { background: #475F77; color: #fff; border: 1px solid #475F77; font-size: 1.4rem; }
.H-button.color:active { background: #34495e; }
.H-button.color-cancel { background: #f00; border: 1px solid #f00; }
.H-button.color-cancel:active { border: 1px solid #DD0A0A; background: #DD0A0A; }

/*图文列表*/
.H-rich-item { padding: 0.8rem; position: relative; background: #fff; }
.H-rich-item:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-rich-img { width: 6.2rem; height: 6.2rem; }
.H-rich-text { position: relative; line-height: normal; }
.H-rich-text strong { font-size: 1.6rem; color: #444; line-height: 2.1rem; font-style: normal; font-weight: normal; }
.H-rich-text p { font-size: 1.4rem; color: #999; line-height: 2rem; padding-top: 0.4rem; }
.H-rich-img-range { width: 9rem; height: 6rem; }
.H-rich-pushinfo { font-size: 1rem; color: #999; position: absolute; left: 0; bottom: -1px; z-index: 10; width: 100%; line-height: 1; }

/*相册列表*/
.H-picture-list { position: relative; display: table; width: 100%; padding: 0 0 1rem 1rem; background: #fff; }
.H-picture-item { display: table-cell; width: 33.33333333%; text-align: center; padding: 1rem 1rem 0 0; vertical-align: middle; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-touch-callout: none; float: left; }
.H-picture-item img { width: 100%; max-width: 100%; height: auto; font-size: 0; line-height: 0; }
.H-picture-item p { padding: 0.8rem; }
.H-picture-item.H-picture-two-row { width: 50%; }
.H-picture-item.H-picture-four-row { width: 25%; }

/*相册之瀑布流*/
.H-picture-waterfall { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 1rem; column-gap: 1rem; padding: 1rem; }
.H-picture-waterfall-item { width: 100%; background: #eee; margin-bottom: 1rem; display: inline-block; text-align: center; background: #fff; position: relative; }
.H-picture-waterfall-item p { padding: 0.8rem; position: relative; margin: 0; }
.H-picture-waterfall-item img { width: 100%; font-size: 0; line-height: 0; }

/*宫格排版*/
.H-grid { position: relative; display: table; width: 100%; background: #fff; }
.H-grid:before { content: ""; position: absolute; left: 0; margin-left: 0; top: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-grid-item { display: table-cell; text-align: center; vertical-align: middle; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-touch-callout: none; float: left; height: 10rem; position: relative; }
.H-grid-item:active { background: #f4f4f4; }
.H-grid-item span i.iconfont { font-size: 3rem; }
.H-grid-item p { font-size: 1.4rem; padding: 0.5rem; }
/*九宫格*/
.H-grid-nine { width: 33.33333333%; }
.H-grid-nine:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #d7d7d7; border-width: 0 1px 1px 0; overflow: hidden; overflow: hidden; }
.H-grid .H-grid-nine:nth-child(3n):after { border-right: none; }
/*十六宫格*/
.H-grid-sixteen { width: 25%; height: 9rem; }
.H-grid-sixteen:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #d7d7d7; border-width: 0 1px 1px 0; overflow: hidden; overflow: hidden; }
.H-grid .H-grid-sixteen:nth-child(4n):after { border-right: none; }

/*会话列表*/
.H-chat-item { padding: 0.8rem; position: relative; background: #fff; }
.H-chat-item:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-chat-item:active { background: #f4f4f4; }
.H-chat-list .H-chat-picture { position: relative; overflow: hidden; line-height: 0; font-size: 0; }
.H-chat-list .H-chat-picture img { width: 5rem; height: 5rem; }
.H-chat-text { padding: 0 1rem; }
.H-chat-content strong { font-weight: normal; font-size: 1.6rem; font-weight: 500; }
.H-chat-content p { color: #999; font-size: 1.4rem; padding: 0.2rem 0; }
.H-chat-tip { font-size: 1.2rem; color: #999; }
.H-chat-tip p { padding: 0.3rem 0; display: inline-block; text-align: right; }

/*聊天页面*/
.H-chat-list-box { padding-bottom: 2rem; width: 100%; max-width: 100%; width: 100%; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-msg-receiver, .H-msg-sender { margin-top: 1rem; width: 100%; clear: both; padding: 0 0.8rem; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-msg-container { padding: 0 0.8rem; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; width: 100%; }
.H-msg-picture { line-height: 0; font-size: 0; width: 4.5rem; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; top: 0; z-index: 100; }
.H-msg-picture img { width: 4.5rem; height: 4.5rem; }
.H-msg-content { min-height: 4.5rem; position: relative; line-height: 0; font-size: 0; max-width: 100%; display: inline-block; -webkit-box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap; border-box; -webkit-box-sizing: border-box; }
.H-msg-text { line-height: 2.5rem; font-size: 1.6rem; max-width: 100%; }
.H-msg-voice { font-size: 1.6rem; padding-top: 1.5rem; max-width: 100%; }
.H-msg-image { max-width: 100%; position: relative; font-size: 0; line-height: 0; }
.H-msg-image img { max-width: 100%; }
.H-msg-status { min-width: 3rem; padding: 1.2rem 0.8rem 0 0.8rem; }
.H-msg-status span i.iconfont { font-size: 1.8rem; color: #999; }
.H-msg-status span.H-satus-load { animation: 1s linear 0s normal none infinite rotate; -webkit-animation: 1s linear 0s normal none infinite rotate; }
.H-msg-status span.H-satus-warn i { color: #f00; }
.H-msg-flex-area { width: auto; max-width: 100%; }
/*接受方*/
.H-msg-receiver .H-msg-content { background: #34495e; color: #fff; padding: 0.8rem; border-radius: 1rem; -webkit-border-radius: 1rem; margin-left: 0.4rem; float: left; }
.H-msg-receiver .H-msg-container { padding-left: 5.1rem; }
.H-msg-receiver .H-msg-voice i { margin-right: 1rem; }
.H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #34495e transparent transparent; position: absolute; top: 15px; left: -14px; z-index: 12; }
.H-msg-receiver .H-msg-picture { left: 0.8rem; }

/*发送方*/
.H-msg-sender .H-msg-content { background: #e3e7ec; color: #556893; padding: 0.8rem; border-radius: 1rem; -webkit-border-radius: 1rem; margin-right: 0.4rem; float: right; }
.H-msg-sender .H-msg-container { padding-right: 5.1rem; }
.H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #e3e7ec; position: absolute; top: 15px; right: -14px; z-index: 12; }
.H-msg-sender .H-msg-status { text-align: right; }
.H-msg-sender .H-msg-picture { right: 0.8rem; }


@keyframes rotate {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/*标签*/
.H-tag-list { overflow: hidden; }
.H-tag-item { padding: 0.8rem 1.2rem; text-align: center; background: #fff; border-bottom: 0.2rem solid #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.H-tag-item.active { border-bottom: 0.2rem solid #34495e; color: #34495e; }
.H-tag-item:active { background: #f4f4f4; }

.H-tag-tab { border: 1px solid #34495e; overflow: hidden; border-radius: 0.3rem; -webkit-border-radius: 0.3rem; line-height: normal; }
.H-tag-tab span { border: 1px solid #34495e; float: left; border-width: 0 1px 0 0; padding: 0.6rem 0; vertical-align: middle; text-align: center; font-size: 1.4rem; }
.H-tag-tab span:last-child { border-width: 0; }
.H-tag-tab span.active, .H-tag-tab span:active { background: #34495e; color: #fff; }

/*启动画*/
.H-launch { height: 100%; width: 100%; display: box; display: -webkit-box; -webkit-box-orient: horizontal; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; }
.H-launch-item { -webkit-box-align: center; box-sizing: border-box; -webkit-box-sizing: border-box; height: 100%; width: 100%; }
.H-launch-fixed { position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 100; background: rgab(0,0,0,0); }
.H-launch-pages { position: fixed; bottom: 2rem; left: 0; width: 100%; right: 0; z-index: 100000; height: 1rem; text-align: center; }
.H-launch-pages a { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; -webkit-border-radius: 50%; background: rgba(0,0,0,0.5); margin-right: 0.5rem; }
.H-launch-pages a.active { background: rgba(255,255,255,0.5); transition: background 0.2s; -webkit-transition: background 0.2s; }
.skip-launch { position: fixed; top: 2rem; right: 1rem; z-index: 199305270356; display: inline-block; padding: 0.2rem 1rem; color: #fff; background: rgba(0,0,0,0.8); border-radius: 0.5rem; -webkit-border-radius: 0.5rem; font-size: 1.4rem; }

/*改写滚动条*/
::-webkit-scrollbar /*整体部分*/ { width: 0; height: 0; }
::-webkit-scrollbar-track /*滑动轨道*/ { background: rgba(0,0,0,0); }
::-webkit-scrollbar-thumb /*滑块*/ { background: rgba(0,0,0,0.0); }
::-webkit-scrollbar-thumb:hover /*滑块效果*/ { background: rgba(0,0,0,0); }
